<template>
  <view class="container">
    <!-- 【线下】订单支付成功 -->
    <view class="result-wrap" v-if="status===1">
      <view class='image-wrap'>
        <image src="/static/images/icon/pay-success.png" class="success-img"></image>
      </view>
      <view class='text-wrap'>
        <view class="success-text">订单提交成功</view>
        <view class="success-text">请线下支付</view>
      </view>
      <view class="to-order-btn" @click="goUrl('/pages/index/index',false,true)">
        继续逛逛
      </view>
      <view class='btn-go-order' @click="goUrl('/pages/my/my',false,true)">返回我的页面</view>
    </view>
    <!-- 【线下】订单支付失败 -->
    <view class="result-wrap" v-if="status===0">
      <view class='image-wrap'>
        <image src="/static/images/icon/pay-error.png" class="success-img"></image>
      </view>
      <view class='text-wrap'>
        <view class="text">提交失败</view>
        <button class='contact-wrap' open-type="contact">
          <image src="/static/images/icon/contact.png" class='contact-icon'></image>
          <view class='contact'>联系客服</view>
        </button>
      </view>
      <view class='btn-go-order' @click="goUrl('/pages/my/my',false,true)">返回我的页面</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        status: '' // 状态
      };
    },
    onLoad(options) {
      this.status = options.status * 1
    }

  }
</script>
<style lang="scss">
  page {
    height: 100%;
    background: #fafafa;
  }

  .container {
    background-color: #fafafa;
    align-items: flex-start;
    overflow-x: hidden;
  }

  .result-wrap {
    width: 100%;
    height: 40%;
    background: #fff;
    padding: 40rpx 0 60rpx 0;
  }

  .image-wrap {
    width: 100%;
    height: 100rpx;
    margin: 40rpx 0;
    display: flex;
    justify-content: center;
  }

  .success-img {
    width: 100rpx;
    height: 100rpx;
    margin: 0 auto;
  }

  .text-wrap {
    width: 100%;
    margin-bottom: 40rpx;
  }

  .success-text {
    font-size: 30rpx;
    color: #233445;
    text-align: center;
    line-height: 60rpx;
    margin-bottom: 20rpx;
  }

  .text {
    font-size: 30rpx;
    color: #999;
    text-align: center;
    line-height: 60rpx;
    margin-bottom: 20rpx;
  }

  .btn-go-order {
    color: #999;
    width: 300rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 28rpx;
    margin: 0 auto;
  }

  .to-order-btn {
    color: #fff;
    background: linear-gradient(to right, #ff3456, #ff347d);
    border-radius: 0px;
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 28rpx;
    margin: 0 auto;
  }

  .tips {
    display: flex;
    flex-direction: column;
  }

  .tips .p {
    width: 100%;
    text-align: center;
    line-height: 40rpx;
    height: 40rpx;
    font-size: 28rpx;
    color: #233445;
  }

  .p .time {
    color: #ff3456;
  }

  .contact-wrap {
    height: 100rpx;
    line-height: 100rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
  }

  .contact-wrap::after {
    border: none;
  }

  .contact-wrap .contact-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }

  .contact-wrap .contact {
    font-size: 28rpx;
    color: #1296db;
  }
</style>
